<template>
  <div class="container">
    <div class="typeList">
      <div
        class="typeItem"
        :class="route.params.id == item.id ? 'active' : ''"
        v-for="item in typeList"
        @click="$router.push({ path: `/nav/${item.id}` })"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="list">
      <template v-for="(item, index) in listData">
        <ListItem :ArticleInfo="item" />
        <el-divider v-if="index != listData.length - 1" />
      </template>
      <el-skeleton
        :rows="3"
        animated
        v-if="total != listData.length || total == -1"
      />
    </div>
  </div>
  <ks-footer />
</template>

<script setup>
import ListItem from "@/components/ListItem.vue";
import { onUnmounted, ref, watch } from "vue";
import { GetArticleList, GetArticleType } from "@/api/request";
import { ElSkeleton, ElDivider } from "element-plus";
import KsFooter from "@/components/Footer.vue";
import { useRoute } from "vue-router";
import "element-plus/es/components/skeleton/style/css";
import "element-plus/es/components/divider/style/css";
const route = useRoute();
const pageInfo = {
  pageIndex: 1,
  pageSize: 20,
  typeId: route.params.id,
};

const listData = ref([]);
const typeList = ref([]);
const total = ref(-1);

watch(
  () => route.params.id,
  () => {
    listData.value = [];
    total.value = -1;
    pageInfo.typeId = route.params.id;
    pageInfo.pageIndex = 1;
    getData();
  }
);

// 滚动防抖
let timer;

const getType = () => {
  GetArticleType().then((res) => {
    typeList.value = res.data;
  });
};

const getData = () => {
  if (listData.value.length == total.value) {
    return;
  }
  GetArticleList(pageInfo).then((res) => {
    listData.value = [...listData.value, ...res.data];
    total.value = res.total;
    pageInfo.pageIndex++;
  });
};

// 监听鼠标滚轮向下滚动
const scrollLoad = (e) => {
  //窗口高度
  var windowHeight =
    document.documentElement.clientHeight || document.body.clientHeight;
  //滚动高度
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  //页面高度
  var documentHeight =
    document.documentElement.scrollHeight || document.body.scrollHeight;

  if (windowHeight + scrollTop >= documentHeight * 0.8) {
    // 函数节流,1s内只执行一次
    const TIME = 1000;
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      timer = null;
      getData();
    }, TIME);
  }
};

// 页面触底后加载数据
window.addEventListener("scroll", scrollLoad);
onUnmounted(() => {
  window.removeEventListener("scroll", scrollLoad);
  if (timer) {
    clearTimeout(timer);
  }
});
getType();
getData();
</script>

<style scoped>
.list {
  padding-bottom: 100px;
  box-sizing: border-box;
}
</style>

<style lang="less">
.typeList {
  min-width: 150px;
  position: fixed;
  top: 100px;
  left: 10%;
}
.container {
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  position: relative;
}

.typeItem {
  margin-bottom: 10px;
  font-size: 20px;
  cursor: pointer;
}
.typeItem:hover {
  color: #00c8c8;
}
.active {
  color: #00c8c8;
}
// 适配手机屏幕
@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    margin: 0;
    padding: 0;
    margin-top: 0px;
    margin-bottom: 50px;
  }
}
// 小于1300
@media screen and (max-width: 1300px) {
  .typeList {
    display: none;
  }
}
</style>
